<!DOCTYPE html>
<html>
<head>
  <style>
    .cube-container {
    
      perspective: 1000px; /* 创建透视效果 */
      width: 200px;
      height: 200px;
      margin: 50px auto;
      margin-top: 100px;
    }
    
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* 关键属性 */
      transform: rotateX(45deg) rotateY(45deg);
    }
    
    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(59, 130, 246, 0.7);
      border: 1px solid #3B82F6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
    }
    
    /* 定义各个面的位置 */
    .front { transform: translateZ(100px); }
    .back { transform: rotateY(180deg) translateZ(100px); }
    .right { transform: rotateY(90deg) translateZ(100px); }
    .left { transform: rotateY(-90deg) translateZ(100px); }
    .top { transform: rotateX(90deg) translateZ(100px); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); }
  </style>
</head>
<body>
  <div class="cube-container">
    <div class="cube">
      <div class="face front">前面</div>
      <div class="face back">后面</div>
      <div class="face right">右面</div>
      <div class="face left">左面</div>
      <div class="face top">上面</div>
      <div class="face bottom">下面</div>
    </div>
  </div>
</body>
</html>